<template>
  <div>
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item label="订单日期">
        <el-date-picker
          v-model="orderDateRange"
          type="daterange"
          start-placeholder="开始日期"
          end-placeholder="结束日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="变更日期">
        <el-date-picker
          v-model="changeDateRange"
          type="daterange"
          start-placeholder="开始日期"
          end-placeholder="结束日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="变更人">
        <el-select v-model="changer" placeholder="请选择">
          <el-option label="张三" value="zhangsan"></el-option>
          <el-option label="李四" value="lisi"></el-option>
          <!-- 更多选项... -->
        </el-select>
      </el-form-item>
      <el-form-item label="订单编号">
        <el-input v-model="orderNumber" placeholder="请输入订单编号"></el-input>
      </el-form-item>
      <el-form-item label="变更原因">
        <el-input v-model="changeReason" placeholder="请输入变更原因"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="searchChanges">查询</el-button>
        <el-button @click="exportChanges">导出</el-button>
      </el-form-item>
    </el-form>

    <div class="cen">
      采购订单变更表
    </div>

    <el-table :data="changes" style="width: 100%">
      <el-table-column prop="orderDate" label="订单日期" width="180"></el-table-column>
      <el-table-column prop="orderNumber" label="订单编号" width="180"></el-table-column>
      <el-table-column prop="version" label="版本号" width="120"></el-table-column>
      <el-table-column prop="changeDate" label="变更日期" width="180"></el-table-column>
      <el-table-column prop="changer" label="变更人" width="120"></el-table-column>
      <el-table-column prop="changeReason" label="变更原因" width="200"></el-table-column>
      <el-table-column prop="changeType" label="变更类型" width="120"></el-table-column>
      <el-table-column prop="productCode" label="商品编号" width="120"></el-table-column>
      <el-table-column prop="productName" label="商品名称" width="180"></el-table-column>
      <el-table-column prop="supplier" label="供应商" width="180"></el-table-column>
      <el-table-column prop="changedField" label="变更字段" width="180"></el-table-column>
      <el-table-column prop="beforeChange" label="变更前内容" width="200"></el-table-column>
      <el-table-column prop="afterChange" label="变更后内容" width="200"></el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 筛选条件
      orderDateRange: '',
      changeDateRange: '',
      changer: '',
      orderNumber: '',
      changeReason: '',
      // 表格数据
      changes: [
        // 示例数据
        {
          orderDate: '2024-12-01',
          orderNumber: 'PO12345',
          version: '1.0',
          changeDate: '2024-12-02',
          changer: '张三',
          changeReason: '增加商品',
          changeType: '添加',
          productCode: 'PROD001',
          productName: '商品A',
          supplier: '供应商A',
          changedField: '数量',
          beforeChange: '10',
          afterChange: '20'
        },
        {
          orderDate: '2024-12-01',
          orderNumber: 'PO12345',
          version: '1.0',
          changeDate: '2024-12-02',
          changer: '张三',
          changeReason: '增加商品',
          changeType: '添加',
          productCode: 'PROD001',
          productName: '商品A',
          supplier: '供应商A',
          changedField: '数量',
          beforeChange: '10',
          afterChange: '20'
        },
        // 更多数据...
      ]
    };
  },
  methods: {
    searchChanges() {
      // 根据筛选条件搜索变更记录
      console.log('搜索条件：', this.orderDateRange, this.changeDateRange, this.changer, this.orderNumber, this.changeReason);
      // 这里可以调用API获取数据
    },
    exportChanges() {
      // 导出变更记录
      console.log('导出数据：', this.changes);
      // 实现导出逻辑
    },
    printChanges() {
      // 打印变更记录
      console.log('打印数据：', this.changes);
      // 实现打印逻辑
    }
  }
};
</script>
</script>


<style scoped>
.demo-form-inline .el-form-item {
  margin-right: 20px;
}

.cen{
  text-align: center;
  font-size: 20px;
}
</style>